<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>找回密码</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
    .input-center{
      margin: 0 auto;
      height：60px;
      width:100%;
      line-height: 60px
    }
    input{
      height:100%;
      width:100%;
      height:60px;
      /*line-height: 60px;*/
      outline: none
    }
    .regrist-button{
      margin-top: 50px;
      background: #ccc;
      cursor: pointer;
      border: none;
      font-size: 18px;
      display: block;
      width: 100%;
      margin-bottom: 10px;
      color:#fff;
      padding: 15px 0;
      border-radius:4px;
      text-align: center;
      vertical-align: top;
      white-space: nowrap;
      font-weight: 400;
      line-height: 20px;
      position: relative;
      outline:none;
    }
    .register-btn{
      background: #9D0152
    }
    .input-center input{
      border:none;
      border-bottom: 1px solid #ccc;
    }
    </style>
</head>
<body >
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">找回密码</span>
</div>
<div  id="app" v-cloak style="margin:0 auto;padding-top:70px;width:80%">
<div class="input-center">
  <input class="input" type="number" v-model="items.phone" ref="input1" placeholder="请输入手机号码"  required />
</div>
<div class="input-center" style="position:relative">
  <input type="number" class="getcodecontent" v-model="items.verify_code" ref="input2"  placeholder="请输入验证码" />
  <sendcode  type="2"  :phone="items.phone"  style="position:absolute;right:0px;top:40px"></sendcode>
</div>
<div class="input-center">
    <input class="input" type="password" ref="input3" v-model="items.password" placeholder="输入新密码"  required />
</div>

  <button v-myclick="finish" type="button" class="regrist-button" :class="{'register-btn':items.phone&&items.verify_code&&items.password}" >确认</button>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank',
        });
        initApp();
        api.parseTapmode();
    };

    function initApp() {
        var isBigImg = Vue.BSImg == 'big';
        new Vue({
            el: '#app',
            data: {
                items: {
                    phone: null,
                    verify_code: null,
                    password: null,
                },
                isTip: false,
                isClose: true,
                isLogin: false,
                BSImg: {
                    big: isBigImg,
                    small: !isBigImg
                }
            },
            watch: {
                'items': {
                    handler: function (val, oldval) {
                        var val1 = this.$refs.input1.value;
                        var val2 = this.$refs.input2.value;
                        var val3 = this.$refs.input3.value;
                        if (val1 && val2 && val3) {
                            this.isLogin = true;
                        }

                    },
                    deep: true
                }
            },
            methods: {
                changeStyle: function (value) {
                    this.isClose = !value;
                },
                finish: function () {
                    if (!this.items.phone) {
                        pinet.alert("请输入手机号");
                        return;
                    }
                    if (!this.items.verify_code) {
                        pinet.alert("请输入验证码");
                        return;
                    }
                    if (!this.items.password) {
                        pinet.alert("请输入密码");
                        return;
                    }
                    var data = {
                        "phone": this.items.phone,
                        "password": this.items.password,
                        "verify_code": this.items.verify_code
                    };
                    pinet.post(URL.forgetPwd, data, function () {
                        alert('密码修改成功');
                        closeWin();
                    });


                }
            }
        })
    }
</script>
</body>
</html>
